<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/logo.gif" alt="" class="logo-img">
      <span>船舶计划申报系统</span>
    </div>
    <!--<div v-show='broadcast.length!=0' class="broadcasts">
      <div id="carousel" :class="'carousel' + ' ' + aniClass" @mouseover="onMouseOver()" @mouseout="onMouseOut()">
        <span style="cursor: pointer;" @click='adClick(index)' :class='item.noticeGrade'
              v-for='(item,index) in broadcast'>
          <img :src='"@/assets/board-"+item.noticeGrade+".png"'> {{index+1}}/{{broadcast.length}} : {{item.content}}
        </span>
        <span style="cursor: pointer;" @click='adClick(index)' :class='item.noticeGrade'
              v-for='(item,index) in broadcast'>
          <img :src='"@/assets/board-"+item.noticeGrade+".png"'> {{index+1}}/{{broadcast.length}} : {{item.content}}
        </span>
      </div>
    </div>-->
    <div class="user-info">
      <!--<el-badge is-dot class="msg-badge" :hidden='!newMessage'>
        <div class="news" @click="showMessageList">
          <i class="el-icon-bell"></i><span>消息</span>
        </div>
      </el-badge>-->
      <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
          <img src="@/assets/user-icon.png" alt=""> {{username}}
          <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="changepwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="loginout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!--公告详情-->
    <el-dialog title="" :visible.sync="showBroadcastDetail" width="80%" @close="closeDialog" class="boradDetail">
      <h2 class="titleblue">公告详情</h2>
      <div class="main">
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <label>公告类型</label>
              <div class="type-width">{{broadcast[broadcastIndex] ? broadcast[broadcastIndex].typeName : ''}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <label>公告主题</label>
              <div class="theme-width">{{broadcast[broadcastIndex] ? broadcast[broadcastIndex].title : ''}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <label>公告正文</label>
              <div class="content-width">{{broadcast[broadcastIndex] ? broadcast[broadcastIndex].content : ''}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="broadcast[broadcastIndex] && broadcast[broadcastIndex].files">
          <el-col :span="24">
            <div class="grid-content">
              <label>公告附件</label>

              <div class="annex-width">
                <a class="annex-div" v-for='(item,index) in broadcast[broadcastIndex].imgFiles' target='_blank'
                   @mouseover="dlMouseOver(index)" @mouseout="dlMouseOut()"
                   :href="item.url">
                  <img :src="item.url"/>
                  <div class="annext-modal" v-show="dlActive==index">
                    <div class="mask"></div>
                    <img src="../../../static/img/download-icon.png"/>
                  </div>
                </a>
                <a class="annex-div file-div" v-for='(item,index) in broadcast[broadcastIndex].files' target='_blank'
                   :href="item.url">
                  <p>{{item.name}}</p>
                </a>

              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content">
              <label>公告来源</label>
              <div class="type-width">{{broadcast[broadcastIndex] ? broadcast[broadcastIndex].source : ''}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <label>发布日期</label>
              <div class="type-width">{{!!broadcast[broadcastIndex] && broadcast[broadcastIndex].sendTime ?
                this.$m(broadcast[broadcastIndex].sendTime).format('YYYY-MM-DD hh:mm:ss') : ''}}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="text-align: center;" class="footer-row">
          <el-col :span="24">
            <div class="grid-content">
              <el-button @click="prevNotice" class="sure">上一篇</el-button>
              <el-button @click="nextNotice" class="cancel">下一篇</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    data: () => {
      return {
        newMessage: false,
        // marqTimer: 0,
        broadcast: [{
          noticeGrade: 'white',
          content: '目前为止，暂未有任何广播公告',
          sendTime: '',
          demo: true
        }, {
          noticeGrade: 'white',
          content: '目前为止，暂未有任何广播公告',
          sendTime: '',
          demo: true
        }],
        aniClass: 'play',
        showBroadcastDetail: false,
        broadcastIndex: 0,
        dlActive: -1,
        msgTimer: 0
      }
    },
    computed: {
      username () {
        let username = localStorage.getItem('userName')
        return username
      }
    },
    created () {

    },
    mounted () {
      this.msgTimer = setInterval(() => {
        this.checkNewMsg()
      }, 30000)
      // this.getBroadcast()// this.searchMsg();
    },
    destroyed () {
      clearInterval(this.msgTimer)
    },
    methods: {
      getBroadcast () {

      },
      checkNewMsg () {
        // let userId = this.$profile.id
        // let query = 'deleteFlag==false;status==1;userId=_=' + userId + ';orgId=_=' + this.$profile.organiza.id + ';'
        //
        // messageService.ps(0, query).then(res => {
        //   this.newMessage = (res.dataCount > 0)
        // })
      },
      onMouseOver () {
        this.aniClass = 'pause'
      },
      onMouseOut () {
        this.aniClass = 'play'
      },
      /* 公告详情下载附件 */
      dlMouseOver (idx) {
        this.dlActive = idx
      },
      dlMouseOut () {
        this.dlActive = -1
      },
      closeDialog () {
        this.showBroadcastDetail = false
      },
      prevNotice () {
        if (this.broadcastIndex === 0) {
          this.$alert('已经是第一篇了')
          return
        }
        this.broadcastIndex--
      },
      nextNotice () {
        if (this.broadcastIndex + 1 === this.broadcast.length) {
          this.$alert('已经是最后一篇了')
          return
        }
        this.broadcastIndex++
      },
      adClick (idx) {
        if (this.broadcast[idx].demo) {
          return
        }
        this.broadcastIndex = idx
        this.showBroadcastDetail = true
      },
      handleCommand (command) {
        if (command == 'loginout') {
          // clearInterval(this.marqTimer)
          localStorage.removeItem('profile')
          localStorage.removeItem('token')
          localStorage.removeItem('dutyLog')
            localStorage.removeItem('userName')
          this.$router.replace('/login')
        } else if (command == 'changepwd') {
          // clearInterval(this.marqTimer)
          this.$router.push('/change-pwd')
        }
      },
      move () {
        var ul = document.getElementById('carousel')
        var li = ul.getElementsByTagName('li')

        if (li[li.length - 1].offsetLeft + this.left - 10 <= 0) {
          ul.style.left = '0px'
          this.left = 0
        } else {
          ul.style.left = parseInt(this.left - this.speed) + 'px'
          this.left = this.left - this.speed
        }
      },
      showMessageList () {
        this.$router.push('/message')
        // this.searchMsg()
        // this.newsVisible = true
      },

      handleSizeChange (val) {

      },
      handleCurrentChange (val) {
        this.currentPage = val
        this.searchMsg()
      }
    }
  }

</script>

<style scoped lang="scss">
  .header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    color: #fff;
    /*background: #0062cd;*/
    background: #666;
    display: flex;
    align-items: center;
  }

  .header .user-info .news {
    width: auto;
    padding: 0;
    color: #fff;
    cursor: pointer;
    height: 30px;
  }

  .header .user-info .news i {
    margin-right: 5px;
  }

  .header .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
    flex: 1;
  }

  .menu-link li:first-child {
    margin-top: -2px;

  }

  .logo-img {
    vertical-align: middle;
    background: transparent;
    width: 50px;
    height: 50px;
    margin-right: 5px;
  }

  .user-info {
    margin-right: 10px;
    margin-left: 10px;
    font-size: 16px;
    color: #999;
    display: flex;
    flex-direction: row;
    line-height: 30px;
    height: 30px;
  }

  .user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    color: white;
    cursor: pointer;
    vertical-align: middle;
  }

  .user-info .el-dropdown-link img {
    position: relative;
    top: 3px;
  }

  .menu-link li {
    text-align: center;
    color: #fff;
  }

  .board li {
    display: inline-block;
    background-color: #0056b4;
    height: 50px;
    line-height: 50px;
    margin: 5px;

  }

  .board li p {
    height: 25px;
    font-size: 14px;
    line-height: 25px;
    padding: 0px 20px 0 10px;
  }

  .board li p span {
    color: #fec220;
    font-size: 16px;
    margin-left: 8px;
  }

  .carousel {
    position: absolute;
    /*width: 1000000000px;*/
    left: 0px;
    height: 50px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    animation: marquee 12s linear infinite;
  }

  .play {
    animation-play-state: running;
  }

  .pause {
    animation-play-state: paused;
  }

  @keyframes marquee {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(-50%, 0);
    }
  }

  #carousel span {
    height: 50px;
    line-height: 50px;
    margin-left: 10px;
    font-size: 16px;
  }

  #carousel img {
    vertical-align: middle;
  }

  .broadcasts {
    height: 50px;
    overflow: hidden;
    background-color: #013b79;
    margin-left: 10px;
    flex: 1;
    position: relative;
  }

  .info-content .task-tree label {
    width: auto !important;

  }

  .msg-badge {
    width: 60px;
  }

  .boradDetail {

    .main {
      padding: 20px 130px 100px;
    }

    .el-row {
      margin-bottom: 24px;
    }

    .grid-content label {
      width: 70px;
      float: left;
      line-height: 34px;
      text-align: right;
      margin-right: 10px;
    }

    .grid-content div {
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      font-size: 14px;
      color: #666666;
      padding: 0px 15px;
      box-sizing: border-box;
      line-height: 34px;

    }

    .file-div {
      width: auto !important;
      height: auto !important;
      padding: 0px 0px !important;
      //color:#333;

    }

    .type-width {
      width: 220px;
      height: 34px;

    }

    .theme-width {
      width: auto;
      height: 34px;
    }

    .content-width {
      width: 86%;

    }

    .annex-width {
      padding: 0 !important;
      background-color: transparent !important;
      border: 0px !important;
    }

    .annex-div {
      margin-right: 10px;
      width: 62px;
      height: 64px;
      display: block;
      float: left;
      position: relative;
    }

    .annex-width > .annex-div > img {
      width: 62px;
      height: 64px;
      border-radius: 2px;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      position: absolute;
      object-fit: cover
    }

    .mask {
      position: absolute;
      width: 62px;
      height: 64px;
      background-color: #000 !important;
      opacity: 0.3;
      padding-left: 0 !important;
      top: 0;
      left: 0;
      border: 0px !important;
    }

    .annext-modal {
      width: 62px;
      height: 64px;
      position: absolute;
      padding-left: 0 !important;
      text-align: center;
      background-color: transparent !important;
      text-align: center;
      line-height: 64px;
    }

    .annext-modal img {
      position: absolute;
      margin-right: 0;
      background-color: transparent;
      vertical-align: middle;
      border: none;
      top: 50%;
      margin-top: -11px;
      width: 23px;
      height: 21px;
      margin-left: -5px;
    }
  }
</style>
